import { View, Image, Input, Text } from "@tarojs/components";
import { useLoad } from "@tarojs/taro";
import { useState } from "react";
import "./index.scss";
import Taro from "@tarojs/taro";

const Index = () => {
  const menuList = [
    { icon: "", text: "新鲜蔬菜" },
    { icon: "", text: "鲜肉" },
    { icon: "", text: "米面粮油" },
    { icon: "", text: "餐厨用品" },
    { icon: "", text: "酒水饮料" },
    { icon: "", text: "冻品" },
    { icon: "", text: "蛋类" },
    { icon: "", text: "海鲜水产" },
    { icon: "", text: "调料干货" },
    { icon: "", text: "检漏专区" },
  ];

  const [activeTab, setActiveTab] = useState(0);
  const [productList, setProductList] = useState([
    {
      id: 1,
      name: "精品推荐商品1",
      price: 99.00,
      image: ""
    },
    // 可以添加更多精品推荐商品
  ]);

  const tabList = ["精品推荐", "同行热销", "优质好货", "优品上新"];

  const handleTabClick = (index) => {
    setActiveTab(index);
    // 模拟不同tab的商品数据
    const mockData = Array(10).fill(null).map((_, i) => ({
      id: i,
      name: `${tabList[index]}商品${i + 1}`,
      price: Math.floor(Math.random() * 100) + 9.9,
      image: ""
    }));
    setProductList(mockData);
  };

  // 添加跳转方法
  const handleProductClick = (product) => {
    Taro.navigateTo({
      url: `/packageContacts/pages/goodsDetails/index?id=${product.id}&name=${encodeURIComponent(product.name)}&price=${product.price}&image=${encodeURIComponent(product.image)}`
    })
  }

  return (
    <View className="index">
      <View className="nav-bar">
        <View className="location">
          <Image className="location-icon" src="" />
          <Text>门店</Text>
        </View>
        <Input
          className="search-input"
          placeholder="油菜"
          placeholderClass="placeholder"
        />
        <View className="nav-right">
          {/* <View className="service">
            <Image className="service-icon" src="path-to-service-icon" />
            <Text>客服</Text>
          </View>
          <View className="manager">
            <Image className="manager-icon" src="path-to-manager-icon" />
            <Text>管家</Text>
          </View> */}
        </View>
      </View>

      <View className="menu-section">
        {menuList.map((item, index) => (
          <View key={index} className="menu-item">
            <Image className="menu-icon" src={item.icon} />
            <Text className="menu-text">{item.text}</Text>
          </View>
        ))}
      </View>

      <View className="ad-banner">
        <Image className="ad-image" src="" mode="aspectFill" />
      </View>

      <View className="tab-section">
        <View className="tab-list">
          {tabList.map((tab, index) => (
            <View
              key={index}
              className={`tab-item ${activeTab === index ? "active" : ""}`}
              onClick={() => handleTabClick(index)}
            >
              {tab}
            </View>
          ))}
        </View>
      </View>

        <View className="product-list">
          {productList.map((product, index) => (
            <View 
              className="product-item" 
              key={product.id}
              onClick={() => handleProductClick(product)}
            >
              <Image
                className="product-image"
                src={product.image}
                mode="aspectFill"
              />
              <View className="product-info">
                <View className="product-name">{product.name}</View>
                <View className="price-action">
                  <View className="product-price">¥ {product.price.toFixed(2)}</View>
                  <View className="add-cart">+</View>
                </View>
              </View>
            </View>
          ))}
        </View>
    </View>
  );
};

export default Index;
